import React from 'react'
import { Picker, List } from 'antd-mobile'

class DefaultFirstPicker extends React.PureComponent {
  static propTypes = {
    onChange: React.PropTypes.func.isRequired,
    data: React.PropTypes.array.isRequired,
    colnum: React.PropTypes.number.isRequired,
    text: React.PropTypes.string.isRequired,
    extra: React.PropTypes.string.isRequired,
    value: React.PropTypes.array.isRequired,
  }
  constructor(props) {
    super(props)
    this.changeValue = ::this.changeValue
  }
  changeValue(val) {
    const first = [this.props.data[0].value]
    this.props.onChange(val[0] ? val : first)
  }

  render() {
    const {
      data,
      colnum,
      text,
      extra,
      value,
    } = this.props
    return (
      <Picker
        data={data}
        cols={colnum}
        extra={extra}
        value={value}
        onChange={this.changeValue}
      >
        <List.Item arrow="horizontal">{text || '默认'}</List.Item>
      </Picker>
    )
  }
}

export default DefaultFirstPicker
